var ChatPanelView = {
    main : [
        '<div class="chatPanel mainContentPane">',
            '<div class="chatViewerHeader">',
                '<div class="chatViewerHeaderLeft left"></div>',
                '<div class="chatViewerHeaderRight"></div>',
            '</div>',
            '<div class="chatPanelContent">',
                '<div class="chatLeft">',
                    '<div class="chatViewer"></div>',                    
                    '<div class="chatEditor">',
                        '<div class="h_spliter"></div>',
                        '<div class="chatEditorToolbar"></div>',
                        '<div class="chatEditorBoxWrapper">',
                            '<div class="chatEditorBox"></div>',
                        '</div>',
                    '</div>',
                    '<div class="replyToBroadcaster">Reply to Broadcaster</div>',
                '</div>',
                '<div class="chatMap">',
                    '<div class="v_spliter"></div>',
                    '<div class="map-wrapper-google"></div>',
                '</div>',                
            '</div>',
            '<div class="chatPanelParticipantsWrapper">',
                '<div class="chatPanelParticipantsList"></div>',
                '<div class="participantAdderWrapper">',
                    '<div class="chatMemberViewHeader">',
                        '<span class="closeAddChatMemberViewBtn" title="Back"></span>',
                        lan('app.im.participant.addTip'),                      
                    '</div>',
                    '<div class="chatMemberAddList"></div>',            
                '</div>',
            '</div>',
        '</div>'
    ].join(''),
    
    readerList : [
        '<div class="readerListWrapper">',
            '<div class="readerCount"><%=o.length%> Read</div>',
            '<ul style="max-height: 150px;overflow: auto;">',
                '<% for(var i=0; i<o.length; i++){  %>',
                    '<li class="ellipsis" style="width:120px;" title="<%=o[i]["name"]%>"><%=o[i]["name"]%></li>',
                '<% } %>',
            '</ul>',
        '</div>'
    ].join(''),
    
    participantList : [  
        '<div class="chatMemberViewHeader">',
            '<span class="closeChatMemberViewBtn" title="Back"></span>',
            //lan('app.im.participant.list'),
            '<div style="text-align: left;padding-left: 30px;">',
                '<div class="p_search"></div>',
                //'<div style="display:none;" class="p_kind"></div>',
                '<span class="userIconList" style="vertical-align: middle;padding-left: 10px;color: #000;letter-spacing: 1px;font-size: 14px;">',
                    '<img src="/ujs/images/common16/user.png" />Creator ',
                    '<img src="/ujs/images/common16/user3.png" />Admin ',
                    '<img src="/ujs/images/common16/user2.png"/>User',
                '</span>',
            '</div>',
        '</div>',
        '<div class="chatMemberList">',
            '<div class="chatMemberAdder">+</div>',     
            '<% for(var i=0; i<o.participants.length; i++){ var member = o.participants[i]; %>',
                '<div class="chatMember" id="<%=member.id%>" title="<%=member.name%>" type="<%=member.type%>">',
                    '<% if(!member.admin) { %>',                        
                        '<a class="closeBtn" href="javascript:;" joined="<%=member.joined %>" ></a>',
                        '<% if(member.type == 10) { %>',
                            '<img uid="<%=member.id%>" title="user" class="adminSIcon user" src="/ujs/images/common16/user2.png" />',
                        '<% } %>',
                    '<% } else { %>',
                        '<a class="closeBtn" href="javascript:;" joined="<%=member.joined %>" style="display:none;"></a>',
                        '<% if(member.creator ) { %>',
                            '<img uid="<%=member.id%>" title="creator" class="adminSIcon creator" src="/ujs/images/common16/user.png" />',
                        '<% } else { %>',
                            '<img uid="<%=member.id%>" title="administrator" class="adminSIcon admin" src="/ujs/images/common16/user3.png" />',
                        '<% } %>',
                    '<% } %>',
                    '<div class="hvBox" style="width:85px;height:85px;margin: 0px auto;">',
                        '<img class="chatMemberIcon" src="<%=member.icon ? ujs.browser.loc.addQuery(member.icon, {w:200}) : ( !member.type || member.type === 10 ) ? ujs.getConfigRes("defUserIcon") : ujs.getConfigRes("defGroupIcon") %>">',
                    '</div>',
                    '<div class="chatMemberSummary">',
                        '<p class="chatMemberName"><%=member.name%></p> ',
                    '</div>',
                '</div>',
            '<% } %>',            
        '</div>'
    ].join(''),
    
    participantAdder : [
        '<form class="participantAdder ujsForm">',            
            '<div class="formItem">',               
                '<label style="width:132px;">Select Users</label>',
                '<div class="formField customFormField memberSelector3"></div>',
            '</div>',                
            '<div class="formItem">',
               '<button style="margin-top: 230px;left: 665px;width: 70px;background-position: 3px 4px;padding-left: 18px;border: solid 1px #AAA;padding: 2px 5px 2px 18px;" class="saveChatMemberViewBtn">Save</buttton>',
            '</div>',            
        '</form>'
    ].join(''),
    
    sessionItem : [
        '<li class="sessionListItem" sid="<%=o.sid%>" type="<%=o.type%>" lastDoTime="<%=o.lastDoTime%>">',
            '<div class="sessionIcon hvBox">',
                '<img class="sessionIconImg" src="<%=o.icon ? ujs.browser.loc.addQuery(o.icon, {w:200}) : ujs.getConfigRes("defUserIcon") %>"/>',
            '</div>',
            '<div class="sessionSummary">',
                '<h4 loc="<%=o.perm ? o.perm.rloc : 0 %>"  ttype="<%=o.truetype%>" class="prefixRowIcon sessionTitle <%=o.type%>"><%=o.name.safeString()%></h4>',
                '<div class="sessionLastMsg">',
                    '<h4><%=o.lastMsgUserName%></h4>',
                    '<%=o.lastMsg%>',
                '</div>',
            '</div>',
            '<% if(o.unread){ %>',
                '<span class="unreadMsgCount"><%=o.unread%></span>',
            '<% } %>',
            '<% if(o.typeName){ %>',
                '<span class="unreadMsgCount"><%=o.typeName%></span>',
            '<% } %>',
            '<span class="msgTime"><%=o.msgTime%></span>',
            '<span class="closeBtn sessionListCloseBtn"></span>',
        '</li>'
    ].join('')
};